<template>
  <div class="host-container">
    <!-- 统计信息 -->
    <div class="stats-container">
      <div class="stat-item">
        <el-icon><Monitor /></el-icon>
        <span>总客户端数: {{ totalHosts }}</span>
      </div>
      <div class="stat-item online">
        <el-icon><Check /></el-icon>
        <span>在线: {{ onlineCount }}</span>
      </div>
      <div class="stat-item offline">
        <el-icon><Close /></el-icon>
        <span>离线: {{ offlineCount }}</span>
      </div>
    </div>

    <!-- 客户端列表 -->
    <div class="host-list">
      <div
        v-for="host in hosts"
        :key="host.host"
        class="host-item"
        @click="goToDetail(host)"
        @mouseover="hoveredHost = host.host"
        @mouseleave="hoveredHost = null"
        :class="{
          'host-item-online': host.isonline === 1,
          'host-item-offline': host.isonline === 0,
        }"
      >
        <!-- 在线状态的图标 -->
        <el-icon
          :style="{
            color: host.isonline === 1 ? 'green' : 'gray',
            filter: host.isonline === 0 ? 'grayscale(100%)' : 'none',
          }"
          class="icon"
        >
          <Monitor />
        </el-icon>
        <div
          class="host-address"
          :style="{
            color: host.isonline === 1 ? 'green' : 'gray',
            fontWeight: host.isonline === 1 ? 'bold' : 'normal',
          }"
        >
          {{ host.host }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, computed, onMounted } from "vue";
import { findHostInfoList } from "@/api/HostApi.js";
import { Monitor, Check, Close } from "@element-plus/icons-vue"; //图标

export default {
  components: {
    Monitor,
    Check,
    Close,
  },
  setup() {
    const router = useRouter();
    const hosts = ref([]); // 客户端数据,是一个响应式数组 ， 用hosts.value来访问
    const hoveredHost = ref(null); // 悬浮的客户端

    // 页面一加载 获取客户端数据
    onMounted(async () => {
      const hostInfoList = await findHostInfoList();
      if (hostInfoList.data.code === 1) {
        hosts.value = hostInfoList.data.data;
      }
    });

    // 统计计算: 计算属性
    const totalHosts = computed(() => hosts.value.length);
    const onlineCount = computed(
      () => hosts.value.filter((host) => host.isonline === 1).length
    );
    const offlineCount = computed(
      () => hosts.value.filter((host) => host.isonline === 0).length
    );

    // 跳转到详情页
    const goToDetail = (host) => {
      console.log(host);
      // 只有在线主机才可以点击
      if (host.isonline === 1) {
        router.push({
          path: "/detail",
          query: {
            hostId: host.host,
          },
        });
      }
    };

    return {
      hosts,
      hoveredHost,
      totalHosts,
      onlineCount,
      offlineCount,
      goToDetail,
    };
  },
};
</script>

<style>
/* 主容器 */
.host-container {
  padding: 20px;
  text-align: center;
}

/* 统计信息 */
.stats-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 18px;
  gap: 8px;
}

.stat-item.online {
  color: green;
}

.stat-item.offline {
  color: red;
}

/* 客户端列表 */
.host-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.host-item {
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 150px;
  transition: background-color 0.3s;
}

.host-item:hover {
  transform: scale(1.1);
}

.host-item-online {
  background-color: #e8f9e8;
}

.host-item-offline {
  background-color: #f9e8e8;
  cursor: not-allowed; /* 禁用离线主机的点击 */
}

/* 图标样式 */
.el-icon {
  font-size: 50px;
  transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* 主机地址文字 */
.host-address {
  margin-top: 8px;
  transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
}
</style>
